<template>
	<view class="brand">
		<navBar isBack title="品牌筛选"></navBar>
		
		<view class="b_container">
			<!-- 搜索 -->
			<view class="b_search">
				<view class="b_sInput">
					<view class="i_siIcon"><view class="iconfont icon-search"></view></view>
					<input type="text" @input="searchBrand" placeholder="查找品牌" placeholder-class="col-666"/>
				</view>
			</view>
			
			<scroll-view class="b_scroll" scroll-y :scroll-into-view="scrollSort">
				<!-- 精选推荐 -->
				<view class="b_recomd" v-if="choiceList && choiceList.length" id="sortTop">
					<view class="b_rTitle">精选推荐</view>
					<view class="b_rList">
						<view class="b_rItem" v-for="item in choiceList" @tap="toPage('store', { storeId: item.store_id })">
							<view class="b_rImg"><image :src=" item.store_logo"></image></view>
							<view class="b_rTxt">{{item.store_name}}</view>
						</view>
					</view>
				</view>

				<!-- 数据 -->
				<view class="b_sort">
					<view class="b_sGroup" v-for="items in filterList" :key="items.sort" :id="'sort' + items.sort">
						<view class="b_sTit">{{items.sort}}</view>
						<view class="b_sList">
							<view class="b_sItem" v-for="item in items.list" :key="item.store_id" @tap="toPage('store', { storeId: item.store_id })">
								<view class="b_sLogo"><image :src=" item.store_logo"></image></view>
								<view class="b_sName">{{item.store_name}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 筛选 -->
		<view class="b_filter" @touchstart.stop.prevent="sortTouchMove" @touchmove.stop.prevent="sortTouchMove" id="filter">
			<view class="b_fLetter" v-for="item in filter" :data-sort="item">{{item}}</view>
		</view>
	</view>
</template>

<script>	
import URL from '@/config/url.js'
import navBar from "@/components/navBar/navBar.vue"
import service_mall from '@/service/mall.js'

export default {
	components: { navBar },
	
	data() {
		return {
			ImageUrl: URL.IMAGE,
			filter: ["#","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
			filterItemHeight: null,
			filterItemTop: null,
			choiceList: [],   // 精选推荐品牌
			brandList: [],    // 品牌数据
			filterList: [],   // 筛选后的品牌数据
			searchVal: '',
			scrollSort: null,
		}
	},
	
	onLoad() {
		this.getList()
	},

	onReady() {
		// 获取筛选的字母高度
		setTimeout(() => {
			uni.createSelectorQuery()
				.select('#filter')
				.boundingClientRect()
				.exec(res => { 
					this.filterItemTop = res[0].top
					this.filterItemHeight = res[0].height / this.filter.length
				})
		}, 200)
	},
	
	methods: {
		// 获取品牌列表
		getList() {			
			service_mall.brand_getList()
				.then(res => {	
					console.log(res,'店铺列表')
					if (res.code == 1) {
						let data = res.data
						let filter = this.filter
						let brandList = data.LstStore
						let brand = {}
						let nList = []
						// 处理数据
						for (let i = 0; i < filter.length; i++) {
							for (let j = 0; j < brandList.length; j++) {								
								let letter = filter[i]
								if (letter === brandList[j].sort) {
									brand[letter] ? brand[letter].push(brandList[j]) : brand[letter] = [brandList[j]]
								}
							}
						}
						for (let key in brand) {
							nList.push({ sort: key, list: brand[key]})
						}
						
						this.filterList = nList
						this.brandList = nList
						this.choiceList = data.pushStore
					}
					else {
						this.$utils.showErr({ title: res.msg })
					}
				})
				.catch(err => {
					this.$utils.showErr()
				})
		},
		
		// 搜索品牌
		searchBrand(e) {
			let value = e.detail.value
			
			if (this.searchTimer) clearTimeout(this.searchTimer)			
			if (value && value.trim()) {
				this.searchTimer = setTimeout(() => {
					let brandList = this.brandList
					let newList = []
					for (let i = 0; i < brandList.length; i++) {
						let brand = brandList[i].list
						let data = { sort: brandList[i].sort, list: [] }
						for (let j = 0; j < brand.length; j++) {
							if (brand[j].store_name.indexOf(value.trim()) != -1) {
								data.list.push(brand[j])
							}
						}
						if (data.list.length) newList.push(data)
					}
					
					this.searchEdit = true
					this.filterList = newList
				}, 500)
			}
			else {
				if (this.searchEdit) {
					this.filterList = this.brandList
					this.searchEdit = false
				}				
			}
		},
		
		sortTouchMove(e) {
			let pageY = e.touches[0].pageY
			let index = Math.floor((pageY - this.filterItemTop) / this.filterItemHeight) 
			let sort = this.filter[index]
			if (sort) {
				this.intoSort(sort)
			}
		},
		
		intoSort(sort) {
			if (this.scrollSort !== sort) this.scrollSort = sort === '#' ? 'sortTop' : 'sort' + sort
		},
		
		// 跳转页面
		toPage(page, { storeId } = {}) {
			if (page === 'store') {
				uni.navigateTo({ url: '/pages_now/pages/mall/store/store?storeId=' + storeId })
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.brand {height: 100vh;background: #f8f8f8;display: flex;flex-flow: column;
	.b_container {position: relative;overflow: hidden;flex: 1;}
	// 搜索
	.b_search {width: 100%;height: 122rpx;background: #fff;position: absolute;top: 0;left: 0;z-index: 2;overflow: hidden;
		.b_sInput {height: 74rpx;padding: 0 70rpx;margin: 24rpx 36rpx 0;border-radius: 38rpx;background: rgba(246, 247, 251, .8);position: relative;
			& > input {width: 100%;height: 100%;}
			.i_siIcon {width: 70rpx;height: 74rpx;line-height: 74rpx;color: #666;font-size: 32rpx;padding-left: 28rpx;position: absolute;top: 0;left: 0;}
		}
	}
	.b_sName{ overflow: hidden;text-overflow: ellipsis; white-space: nowrap;width: 70%;}
	.b_scroll {width: 100%;height: 100%;padding-top: 122rpx;}
	// 精选推荐
	.b_recomd {padding: 24rpx 0 56rpx 36rpx;background: #fff;
		.b_rTitle {height: 50rpx;line-height: 50rpx;font-size: 36rpx;font-weight: bold;color: #000;}
		.b_rList {display: flex;flex-wrap: wrap;}
		.b_rItem {width: 144rpx;height: 144rpx;margin: 32rpx 32rpx 0 0;border-radius: 8rpx;background: #f6f7fb;}
		.b_rImg {width: 96rpx;height: 96rpx;margin: 6rpx auto 0;}
		.b_rTxt {height: 32rpx;line-height: 32rpx;text-align: center;color: #939393;font-size: 22rpx;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
		
	}
	// 数据
	.b_sort {padding-bottom: 32rpx;
		.b_sGroup {}
		.b_sTit {height: 64rpx;line-height: 68rpx;font-weight: bold;padding-left: 36rpx;background: #f8f8f8;position: sticky;top: 0;z-index: 2;}
		.b_sList {padding-left: 38rpx;background: #fff;}
		.b_sItem {height: 138rpx;line-height: 138rpx;padding-left: 100rpx;position: relative;
			&::after {content: "";width: 100%;height: 1px;background: rgba(0, 0, 0, .08);position: absolute;bottom: 0;left: 0;transform: scaleY(.5);}
			&:nth-last-child(1)::after {content: none;}
		}
		.b_sLogo {width: 96rpx;height: 96rpx;margin-top: -48rpx;background: #f6f7fb;position: absolute;top: 50%;left: -14rpx;}
	}
	// 筛选
	.b_filter {width: 52rpx;position: fixed;top: 50%;right: 0;z-index: 2;transform: translateY(-50%);
		.b_fLetter {height: 32rpx;line-height: 32rpx;text-align: center;font-size: 20rpx;padding-left: 20rpx;}
	}
}
</style>
